<template>
	<div>
		<el-tree
			ref="treeRef"
			:data="authList"
			check-strictly
			show-checkbox
			node-key="roleId"
			:default-checked-keys="checkedNode"
			:props="{ label: 'name', children: 'roleList' }"
		/>
		<el-button type="primary" @click="onChangeAuth">修改权限</el-button>
	</div>
</template>

<script lang="ts" setup>
import { getAuthList } from '@/api/auth'

interface IAuthItem {
	name: string // 权限名称
	roleId: number // 角色ID
	roleList?: IAuthItem[] // 角色列表 子权限
}

const route = useRoute()

const treeRef = ref<any>(null)
const authList = ref<IAuthItem[]>([])
const checkedNode = ref<any>([])

const { query } = route
if (query.authority) {
	console.log(query.authority)
	checkedNode.value = query.authority
}

const onChangeAuth = () => {
	const selectedTreeNode = treeRef.value.getCheckedNodes()
	console.log(selectedTreeNode, '@@@@')
	console.log(treeRef.value.getCheckedKeys())
}

onMounted(() => {
	getAuthList().then((resp) => {
		authList.value = resp
	})
})
</script>

<style scoped></style>
